<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>电子时钟</title>
  <style type="text/css">
    #z {
      width: 620px;
      height: 200px;
      margin: 200px auto;
    }

    #w1 {
      width: 500px;
      height: 200px;
      color: blue;
      background-color: black;
      float: left;
    }

    #a {
      font-size: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      padding-top: 25px;
      padding-bottom: 23px;
    }

    #b {
      font-size: 27px;
      height: 27px;
      line-height: 27px;
      text-align: center;
      padding-bottom: 25px;
    }

    #w2 {
      width: 100px;
      height: 200px;
      float: left;
      margin-left: 20px;
    }

    #an {
      width: 100px;
      height: 100px;
      font-size: 27px;
      margin-top: 50px;
    }
  </style>
</head>

<body>
  <div id="z">
    <div id="w1">
      <div id="a"><span id="s">23</span>:<span id="f">11</span>:<span id="m">11</span></div>
      <div id="b"><span id="n">2000</span>年<span id="y">11</span>月<span id="r">26</span>日&nbsp;&nbsp;&nbsp;&nbsp;星期<span
          id="xq">日</span></div>
    </div>
    <div id="w2">
      <input type="button" id="an" value="停止" />
    </div>
  </div>
</body>

</html>
<script>
  function z() {
    var sj = new Date();
    var n = sj.getFullYear();
    var y = sj.getMonth();
    y++;
    y = y < 10 ? '0' + y : y;
    var r = sj.getDate();
    r = r < 10 ? '0' + r : r;
    var xq = sj.getDay();
    switch (xq) {
      case 0: xq = '日'; break;
      case 1: xq = '一'; break;
      case 2: xq = '二'; break;
      case 3: xq = '三'; break;
      case 4: xq = '四'; break;
      case 5: xq = '五'; break;
      case 6: xq = '六'; break;
    }
    var s = sj.getHours();
    s = s < 10 ? '0' + s : s;
    var f = sj.getMinutes();
    f = f < 10 ? '0' + f : f;
    var m = sj.getSeconds();
    m = m < 10 ? '0' + m : m;
    document.getElementById('n').innerHTML = n;
    document.getElementById('y').innerHTML = y;
    document.getElementById('r').innerHTML = r;
    document.getElementById('xq').innerHTML = xq;
    document.getElementById('s').innerHTML = s;
    document.getElementById('f').innerHTML = f;
    document.getElementById('m').innerHTML = m;
  }
  z()
  var t = setInterval(z, 1000);
  var an = document.getElementById('an');
  an.onclick = function () {
    var v = an.value;
    if (v == '停止') {
      clearInterval(t);
      an.value = '启动';
    }
    if (v == '启动') {
      t = setInterval(z, 1000);
      an.value = '停止';
    }
  }
</script>